<template>
  <div class="heroe-item" @click="heroeDetails" v-if="!search || searchName">
    <template v-if="elShow || searchName">
      <div class="avatar" :type="heroe.quality">
        <img v-if="heroe.avatar" :src="heroe.avatar" alt="" />
        <img v-else class="noimg" src="../../assets/noimg.png" alt="" />
      </div>
      <div class="info">
        <div class="name">
          <h3 v-html="searchName || heroe.name"></h3>
          <div class="country" :type="heroe.country">
            <img v-if="heroe.country === 1" src="../../assets/wei.svg" alt="" />
            <img v-if="heroe.country === 2" src="../../assets/shu.svg" alt="" />
            <img v-if="heroe.country === 3" src="../../assets/wu.svg" alt="" />
            <img v-if="heroe.country === 4" src="../../assets/qun.svg" alt="" />
          </div>

          <div class="control" v-if="type == 'control'">
            {{ heroe.getAttrName(type) }}：{{ heroe[type] }}
          </div>
          <div class="control" v-else>
            {{ heroe.getAttrName(type || "command") }}：{{
              parseInt(heroe[type || "command"] / 100)
            }}
          </div>
        </div>
        <div class="score">
          <div class="item" :type="heroe.cavalryLevel">
            <img src="../../assets/qi.svg" alt="" />
            <span>骑{{ heroe.cavalryLevel }}</span>
          </div>
          <div class="item" :type="heroe.maulerLevel">
            <img src="../../assets/dun.svg" alt="" /><span
              >盾{{ heroe.maulerLevel }}</span
            >
          </div>
          <div class="item" :type="heroe.archerLevel">
            <img src="../../assets/gong.svg" alt="" /><span
              >弓{{ heroe.archerLevel }}</span
            >
          </div>
          <div class="item" :type="heroe.pikemanLevel">
            <img src="../../assets/qiang.svg" alt="" /><span
              >枪{{ heroe.pikemanLevel }}</span
            >
          </div>
          <div class="item" :type="heroe.weaponLevel">
            <img src="../../assets/qixie.svg" alt="" /><span
              >器{{ heroe.weaponLevel }}</span
            >
          </div>
        </div>
      </div>
      <div class="enlist" :class="{ active: enlist }" @click.stop="enlistHeroe">
        <!-- {{ enlist ? "已招募" : "未招募" }} -->
        <template v-if="enlist">
          <span>已</span><span>招</span><span>募</span>
        </template>
        <template v-else>
          <span>未</span><span>招</span><span>募</span></template
        >
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    heroe: Object,
    search: {
      type: String,
      default: () => "",
    },
    type: {
      type: String,
      default: "command",
    },
  },
  data() {
    return {
      elShow: false,
    };
  },
  name: "HeroeItem",
  methods: {
    heroeDetails() {
      this.$router.push("/heroe/" + this.heroe.id);
    },
    enlistHeroe() {
      this.$store.dispatch("data/setUserHeroe", this.heroe.id);
    },
    updateView() {
      if (!this.$el.getBoundingClientRect) return;
      let offsetTop = this.$el.getBoundingClientRect().top;
      if (offsetTop < this.viewHeight && offsetTop > -100) {
        this.elShow = true;
      } else {
        this.elShow = false;
      }
    },
  },
  watch: {
    searchName() {
      this.updateView();
    },
  },
  computed: {
    ...mapState("data", ["userHeroes"]),
    enlist() {
      let enlist = this.userHeroes.indexOf(this.heroe.id) !== -1;
      return enlist;
    },
    searchName() {
      if (this.search.trim()) {
        if (this.heroe.name.indexOf(this.search.trim()) !== -1) {
          var reg = new RegExp(this.search.trim(), "g");
          let name = this.heroe.name.replace(
            reg,
            "<span>" + this.search.trim() + "</span>"
          );
          return name || "匹配出错";
        } else {
          return "";
        }
      } else {
        return "";
      }
    },
  },
  mounted() {
    this.updateView();
    this.event.on("handleScroll", this.updateView);
  },
  beforeDestroy() {
    this.event.remove("handleScroll", this.updateView);
  },
};
</script>

<style lang="scss" scoped>
.heroe-item {
  height: 0.64rem;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ebebeb;
  margin-bottom: 0.09rem;
  display: flex;
  align-items: center;
  padding: 0 0.08rem;
  .avatar {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 0.04rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    box-sizing: border-box;
    overflow: hidden;
    &[type="4"] {
      border: 2px solid #f2ae32;
    }
    &[type="3"] {
      border: 2px solid #9363de;
    }
    &[type="2"] {
      border: 2px solid #7baefd;
    }
    &[type="1"] {
      border: 2px solid #99cfaa;
    }
    img {
      width: 100%;
      height: 100%;
      &.noimg {
        width: 24px;
        height: 24px;
      }
    }
  }
  .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 0.46rem;
    padding: 0 0.04rem 0 0.08rem;
    .name {
      display: flex;
      align-items: center;
      h3 {
        margin: 0;
        font-size: 0.14rem;
        font-weight: 400;
        color: #333333;
        ::v-deep {
          span {
            color: #f6a16e;
          }
        }
      }
      .country {
        margin-left: 0.04rem;
        width: 0.16rem;
        height: 0.16rem;
        font-size: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .control {
        margin-left: 0.3rem;
        font-size: 0.12rem;
        color: #8c8c8c;
      }
    }
    .score {
      display: flex;
      .item {
        margin-right: 0.04rem;
        flex: 1;
        height: 0.2rem;
        background: #f6a16e;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 10px;
        }
        &[type="S"] {
          background: #f6a16e;
        }
        &[type="A"] {
          background: #c483c0;
        }
        &[type="B"] {
          background: #81a0cf;
        }
        &[type="C"] {
          background: #96bfa3;
        }
        span {
          font-size: 0.12rem;
          color: #fff;
          transform: scale(0.9);
        }
      }
    }
  }
  .enlist {
    width: 0.26rem;
    height: 0.48rem;
    padding: 0 0.05rem 0;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #ebebeb;
    text-align: center;
    color: #8c8c8c;
    box-sizing: border-box;
    font-size: 0.12rem;
    line-height: 0.14rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    &.active {
      background: #ff8a69;
      border: 1px solid #ff8a69;
      color: #fff;
    }
  }
}
</style>
